<template>
    <view class="pages fitment-pages">
        <u-cell-group>
            <u-cell v-if="userInfo===''" @click="toLoginPage">
                <view slot="title" class="u-slot-title">
                    <view class="portrait"><image :src="avatar" mode=""></image></view>
                    <view class="fullname">
                        <u-row justify="space-around">
                            <view class="_name">立即登录</view>
                            <image :src="imgs" style="visibility: hidden"></image>
                        </u-row>
                        <view class="_edit">以便我们能为您提供更好的服务</view>
                    </view>
                </view>
            </u-cell>
            <u-cell size="large" :isLink="true" clickable @click="toUserProfilePage" v-else>
                <view slot="title" class="u-slot-title">
                    <view class="portrait">
                        <image :src="avatar" mode=""></image>
                    </view>

                    <view class="fullname">
                        <view class="_name">{{userInfo.nickname}}</view>
                        <!--<u-row justify="space-around">-->
                            <!--<view class="_name">{{userInfo.nickname}}</view>-->
                            <!--<image :src="imgs" @click.stop="imags" mode=""></image>-->
                        <!--</u-row>-->
                        <!--<view class="_edit">{{mobile}}</view>-->
                        <view class="_edit">查看或编辑个人资料</view>
                    </view>
                </view>
            </u-cell>
        </u-cell-group>

        <u-notice-bar v-if="userInfo!==''" text="请及时支付每期房屋租金，逾期将产生滞纳金哦~"></u-notice-bar>
        <view class="box"  v-if="userInfo!==''">
            <view class="payment" @click="payment">
                <image src="/static/icon/zffz.png" mode=""></image>
                支付房租
            </view>
            <view class="lease" @click="leases">
                <image src="/static/icon/wdzy.png" mode=""></image>
                我的租约
            </view>
            <view class="lease" @click="coupon">
                <image src="/static/icon/coupon.png" mode=""></image>
                我的卡券
            </view>
        </view>

        <u-cell-group>
            <u-cell icon="/static/icon/sd.png" title="会员商城"></u-cell>
            <u-cell icon="/static/icon/kf.png" title="客服电话"></u-cell>
            <u-cell icon="/static/icon/sxx.png" title="在线客服"></u-cell>
            <u-cell v-if="userInfo!==''" icon="/static/icon/yhqh3.png" title="用户切换" value="商家" @click="switchRole"></u-cell>
        </u-cell-group>

        <bottom-navigation-bar></bottom-navigation-bar>
    </view>
</template>

<script>
    import bottomNavigationBar from "../../../components/bottom-navigation-bar";
    export default {
        name: "index",
        components:{
            bottomNavigationBar
        },
        onShow(){
            this.userInfo = uni.getStorageSync('userInfo');
        },
        computed: {
            avatar: function(){
                return this.userInfo.avatar ??
                    "";
            },
            mobile: function() {
                let data = this.userInfo.mobile;
                if (!data) return null;
                data = data + "";
                return data ?
                    data
                        .match(/(\d{3})(\d{4})(\d{4})/)
                        .slice(1)
                        .reduce(function(value, item, index) {
                            return index === 1 ? value + "****" : value + item;
                        }) :
                    null;
            },
        },
        data() {
            return {
                imgs:"/static/icon/wrz.png",
                userInfo:'',
            };
        },
        methods:{
            imags(){
                if (this.imgs === "/static/icon/wrz.png") {
                    this.imgs="/static/icon/smrz.png"
                }else{
                    this.imgs="/static/icon/wrz.png"
                }
            },
            toUserProfilePage(){
                uni.navigateTo({url:'/pages/user/my/profile'});
            },
            toLoginPage(){
                uni.navigateTo({url:'/pages/user/my/login'});
            },
            switchRole(){
                if (parseInt(this.userInfo.is_landlady) === 1){
                    uni.setStorageSync('landlord_tab_bar', 4);
                    uni.redirectTo({url: '/pages/landlord/my/index'})
                }else{
                    uni.showToast({
                        title: '还不是房东哦，快去申请吧！',
                        duration: 2000,
                        icon: "error",
                        success:function () {
                            uni.navigateTo({url: '/pages/user/index/contact'});
                        }
                    });
                }
            },
            payment(){
                uni.navigateTo({url: '/pages/user/my/payment'});
            },
            leases(){
                uni.navigateTo({url: '/pages/user/my/lease'});
            },
            coupon(){
                uni.navigateTo({url: '/pages/user/my/coupon'});
            },
        }
    }
</script>

<style lang="scss" scoped>
    .pages {
        width: 100%;
        min-height: 100vh;
        background-color: RGBA(245, 245, 245, 1);
    }

    .content{
        padding: 20rpx;
    }

    .box{
        width: 100%;
        height: 10%;
        margin: 20rpx;
        .payment{
            width: 130rpx;
            height: 150rpx;
            display: inline-block;
            text-align: center;
            image{
                width: 60rpx;
                height: 60rpx;
                display: block;
                margin: 0 auto;
                margin-top: 20rpx;
                margin-bottom: 20rpx;
            }
        }
        .lease{
            width: 130rpx;
            height: 150rpx;
            display: inline-block;
            margin-left: 40rpx;
            text-align: center;
            image{
                width: 60rpx;
                height: 60rpx;
                display: block;
                margin: 0 auto;
                margin-top: 20rpx;
                margin-bottom: 20rpx;
            }
        }
    }

    .fullname{
        display: inline-block;
        width: 420rpx;
        height: 160rpx;
        overflow: hidden;
        margin: 0 30rpx;
        padding-top: 30rpx;
        ._name{
            max-width: 330rpx;
            white-space:nowrap;
            overflow:hidden;
            text-overflow: ellipsis;
            font-size: 22px;
            margin-right: 20rpx;
        }
        ._edit{
            font-size: 14px;
            color: #C0C0C0;
            margin: 10rpx;
        }

        image{
            width: 80rpx;
            height: 80rpx;
        }
    }
    .u-slot-title{
        @include flex(row);
        justify-content: space-around;
        align-items: center;
    }

    .portrait{
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        overflow: hidden;
        image{
            width: 150rpx;
            height: 150rpx;
        }
    }

    /deep/.u-cell{
        background-color: #ffffff;
    }

</style>